<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  search: [keyword: string]
}>()

const keyword = ref('')

function handleSearch() {
  emit('search', keyword.value)
}
</script>

<template>
  <view class="p-4">
    <view class="flex items-center rounded-full bg-white px-4 py-2 shadow-lg">
      <view class="i-carbon-search mr-2 text-gray-400" />
      <input
        v-model="keyword"
        type="text"
        placeholder="搜索商品、品牌、店铺"
        class="flex-1 text-sm outline-none"
        @confirm="handleSearch"
      >
      <button
        class="rounded-full bg-blue-500 px-4 py-1 text-sm text-white"
        @click="handleSearch"
      >
        搜索
      </button>
    </view>
  </view>
</template>
